<template>
  <div class="container-vertical" style="height:100%;">
    <mt-search v-model="keyword"></mt-search>
    <filter-bar></filter-bar>
    <mt-tab-container class="container-vertical flex1" v-model="selected">
      <mt-tab-container-item style="overflow: auto;" id="猜你喜欢" 
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="50">
      <!-- <mt-cell v-for="n in list" :title="'内容 ' + n" :key="n"/> -->

      <entry-card :cardData="item" v-for="(item, i) in list" :key="i"></entry-card>
      </mt-tab-container-item>
      
    </mt-tab-container>

    <!-- <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <li v-for="item in list">{{ item }}</li>
    </ul> -->
  </div>
</template>

<script>
import EntryCard from '@/components/EntryCard'
import { getProductList } from "@/api/product";
import FilterBar from '@/components/FilterBar'
export default {
  name: "",
  components: { EntryCard, FilterBar },
  props: [""],
  data() {
    return {
      keyword:'',
      selected: '猜你喜欢',
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
  },

  computed: {},

  created() {
    this.loadProductList()
  },
  methods: {
    loadProductList() {
      getProductList().then(res => {
        console.log(res.data)
        this.list = res.data.data
      })
    },
    loadMore() {
      this.loading = true;
      getProductList().then(res => {
        console.log(res.data)
        this.list = this.list.concat(res.data.data)
      })
      // setTimeout(() => {
      //   let last = this.list[this.list.length - 1];
      //   for (let i = 1; i <= 10; i++) {
      //     this.list.push(last + i);
      //   }
      //   this.loading = false;
      // }, 500);
    }
  }
};
</script>
<style lang='scss' scoped>
.mint-search {
  height: auto;
}
.mint-tab-container-wrap {
    height: 100%;
    overflow: auto;
}
.mint-tab-container-item {
  flex: 1;
}
</style>